<template>
  <footer class="footer dker" :class=bgcolor>
    <div id="jp_container_N" class="jp-video-270p">
      <div class="jp-type-playlist">
        <div class="jp-gui">
          <div class="jp-interface">
            <div class="jp-controls">
              <div @click='$store.commit("prevMusic")'>
                <a class="jp-previous">
                  <i class="icon-control-rewind i-lg"></i>
                </a>
              </div>
              <div @click='$store.commit("setMusicUrl",{url:musicUrl,data:musicData})'>
                <a class="jp-play" style="display: inline-block;">
                  <i class="i-2x" :class="playing? 'icon-control-pause':'icon-control-play'"></i>
                </a>
              </div>
              <div @click='$store.commit("nextMusic")'>
                <a class="jp-next">
                  <i class="icon-control-forward i-lg"></i>
                </a>
              </div>
              <div>
                <a class="" data-toggle="dropdown" data-target="#playlist">
                  <i class="icon-list"></i>
                </a>
              </div>
              <div class="jp-progress hidden-xs">
                <div class="jp-seek-bar dk" style="width: 100%;">
                  <div class="jp-play-bar bg" style="width: 0%;">
                  </div>
                  <div class="jp-title text-success" style="display: none;">{{playingLyric}}</div>
                </div>
              </div>

              <div style='width:300px' class="progress-wrap hidden-xs">
                <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted progress-time">{{format(currentTime)}}</div>
                <div class="progress-barr" @mousemove.prev.stop='move' @mouseup.prev.stop='end' style='width:240px' ref="progressBar" >
                  <!--@click.stop='progressClick'-->
                  <div class="bar-inner" @click.stop='progressClick'>
                    <div class="progress" ref="progress"></div>
                    <div class="progress-btn-wrapper" @mousedown.prev='start' >
                      <div class="progress-btn" ref="progressBtn"></div>
                    </div>
                  </div>
                </div>
                <div class="hidden-xs hidden-sm jp-duration text-xs text-muted progress-all">{{format(allTime)}}</div>
              </div>

              <div class="hidden-xs hidden-sm">
                <a class="jp-mute" title="音量">
                  <i class="icon-volume-2"></i>
                </a>
                <a class="jp-unmute hid" title="静音" style="display: none;">
                  <i class="icon-volume-off"></i>
                </a>
              </div>
              <div class="hidden-xs hidden-sm jp-volume">
                <div class="jp-volume-bar dk">
                  <div class="jp-volume-bar-value lter" style="width: 80%;"></div>
                </div>
              </div>
              <div @click='changeMode'>
                <a class="jp-shuffle" :title="titleState">
                  <i class="text-muted" :class='iconPlay'></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'
  import {prefixStyle} from '../common/dom'

  const progressBtnWidth = 16
  const transform = prefixStyle('transform')
  export default {
    data() {
      return {
      }
    },
//    components: {
//      ProgressBar
//    },
    props: {
      bgcolor: {
        type: String,
        default: 'bg-dark'
      },
      playingLyric: {
        type:String,
        default:null
      }
    },
    created() {
      this.touch = {}
    },
    methods: {
      format(interval) {  //时间戳过滤
        interval = interval | 0
        const minute = interval / 60 | 0
        const second = this._pad(interval % 60)
        return `${minute}:${second}`
      },
      _pad(num, n = 2) {
        let len = num.toString().length
        while (len < n) {
          num = '0' + num
          len++
        }
        return num
      },
      start(e) {
        this.touch.initiated = true
        this.touch.startX = e.clientX
        this.touch.left = this.$refs.progress.clientWidth
      },
      move(e) {
        if (!this.touch.initiated) {
          return
        }
        const deltaX = e.clientX - this.touch.startX
        const offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth, Math.max(0, this.touch.left + deltaX))
        this._offset(offsetWidth)
      },
      end() {
        this.touch.initiated = false
        this._triggerPercent()
      },
      progressClick(e) {
        const rect = this.$refs.progressBar.getBoundingClientRect()
        const offsetWidth = e.pageX - rect.left
        rect.top//元素上边到视窗上边的距离;

        rect.right//元素右边到视窗左边的距离;

        rect.bottom//元素下边到视窗上边的距离;

        rect.left//元素左边到视窗左边的距离;
        this._offset(offsetWidth)
        // 这里当我们点击 progressBtn 的时候，e.offsetX 获取不对
        // this._offset(e.offsetX)
        this._triggerPercent();
      },
      _triggerPercent() {
        this.text=1;
        const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth
        const percent = this.$refs.progress.clientWidth / barWidth
        this.$store.commit('setPercent',percent)
      },
      _offset(offsetWidth) {
        this.$refs.progress.style.width = `${offsetWidth}px`
        this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px,0,0)`
      },
      changeMode(){
        this.$store.commit('changeMode')
      }
    },
    watch: {
      percent(newPercent) {
        if (newPercent >= 0&&!this.touch.initiated) {
          const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth
          const offsetWidth = newPercent * barWidth
          this._offset(offsetWidth)
        }
      }
    },
    computed: {
      percent() {
        return this.currentTime / this.allTime
      },
      iconPlay() {
        return this.mode==0? 'icon-loop': this.mode==1? ' icon-shuffle':'fa fa-minus-square-o'
      },
      titleState() {
        return this.mode==0? '列表循环': this.mode==1? '随机播放':'单曲循环'
      },
      ...mapGetters([
        'musicUrl',
        'playing',
        'musicData',
        'currentTime',
        'allTime',
        'mode'
      ])
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  /*@import "~common/stylus/variable"*/
  .progress-wrap
    width: 320px;
    position relative
    .progress-time
      position absolute
      width: 20px
      left: 0
      top: 22px
    .progress-all
      position absolute
      width: 20px
      right: 0
      top: 22px
    .progress-barr
      height: 30px
      margin-left: 30px
      .bar-inner
        position: relative
        top: 13px
        height: 4px
        background: rgba(60, 118, 62, 0.4)
        .progress
          position: absolute
          height: 100%
          background: red
        .progress-btn-wrapper
          position: absolute
          left: -8px
          top: -13px
          width: 30px
          height: 30px
          .progress-btn
            position: relative
            top: 7px
            left: 7px
            box-sizing: border-box
            width: 16px
            height: 16px
            border: 3px solid purple
            border-radius: 50%
            background: white
</style>
